<template>
	<view class="wrap">
		<!-- 顶部栏 -->
		<view class="header">
			<view class="userinfo">
				<!-- 头像 -->
				<view class="image" @click="navTo('info')">
					<u-avatar size="100" :src="avatarUrl" />
				</view>
				<!-- 昵称信息 -->
				<view class="info" style="display: flex;justify-content: space-between;">
					<view>
						<view class="username">{{nickname}}</view>
						<view class="usercode">{{role}}</view>
					</view>
					<view class="setting-icon">
						<image src="/static/aidex/images/list-icon.png" @click="navTo('info')" />
					</view>
				</view>
			</view>
			<!-- 余额栏 -->
			<u-row class="userinfo-topbox" gutter="16" justify="center">
				<u-col span="4" text-align="center">
					<view class="number">{{money+' '}}<em>元</em></view>
					<view>余额</view>
				</u-col>
				<u-col span="4" text-align="center" @click="navTo('')">
					<view>
						<u-icon size="28px" color="#ffffff" name="rmb-circle"></u-icon>
					</view>
					<view>充值</view>
				</u-col>
				<u-col span="4" text-align="center" @click="order()">
					<view>
						<view class="iconfont icon-faan" style="font-size: 24px;color:#ffffff;"></view>
					</view>
					<view>交易明细</view>
				</u-col>
			</u-row>
		</view>
		<!-- 二级页面入口 -->
		<view class="list">
			<view>
				<u-cell-group class="personal-list">
					<u-gap height="20" bg-color="#f5f5f5" />
					<u-cell-item icon="kefu-ermai" :iconStyle="{ color: '#5f8dff' }" title="意见反馈"
						@click="navTo('comment')" />
					<u-cell-item icon="map" :iconStyle="{ color: '#316ede' }" title="账号安全" @click="navTo('pwd')" />
					<u-cell-item icon="order" :iconStyle="{ color: '#59bdf9' }" title="清除缓存"
						@click="navTo('clear-cache')" />
					<u-cell-item icon="account" :iconStyle="{ color: '#27c0dc' }" title="关于我们"
						@click="navTo('about')" />
					<u-cell-item icon="kefu-ermai" :iconStyle="{ color: '#ff8a00' }" title="联系客服"
						@click="navTo('service')" />
					<u-gap height="20" bg-color="#f5f5f5"></u-gap>
					<u-cell-item icon="setting" :iconStyle="{ color: '#2767dc' }" title="系统设置"
						@click="navTo('setting')" />
				</u-cell-group>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				iconSize: 38,
				avatarUrl: '',
				nickname: '',
				money: 0,
				role: ''

			};
		},
		computed: {

		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			logout() {
				this.$u.api.logout().then(res => {
					this.$u.toast(res.msg);
					if (res.code == '200' || res.code == '401') {
						let self = this;
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/sys/login/index'
							});
						}, 500);
					}
				});
			},
			order() {
				this.$u.api.order.findAll().then(res => {
					this.$u.vuex('myOrder', res.data)
					uni.navigateTo({
						url: 'my-order'
					});
				})
			}
		},
		onLoad() {
			// 获取用户信息
			this.$u.api.getUserInfo()
				.then(res => {
					if (res.code === 200) {
						this.$u.vuex('vuex_user', res.data)
						this.role = res.data.rid === 101 ? '普通用户' : '健身教练'
						this.nickname = res.data.nickname
						this.money = res.data.money
						this.avatarUrl = res.data.avatar
					}
				});
		},
	};
</script>
<style lang="scss">
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .u-cell-box .u-cell_title {
		color: #202328;
	}

	.setting-icon {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		right: 40rpx;
		top: 6rpx;


		uni-image {
			width: 64rpx;
			height: 64rpx;
		}
	}
</style>
